<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>基本信息</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="./css/paginat.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link href="css/toastr.min.css" rel="stylesheet">
    <style>
        button {
            margin-left: 4px;
        }
        /* .toast-message{
          width: 800px;
        } */
        .toast-top-center{
            width: 800px;
        }
    </style>
</head>

<body class="gray-bg">
<div id="Mask" style='width: 30%;position:absolute;left: 55%;top: 5px;border: 1px solid #ccc; box-shadow: 2px 2px 2px 2px #ccc;background:antiquewhite;color:black;z-index: 2;word-wrap:break-word;border-radius: 10px;'>
    <div class='content' style='width: 100%;border-bottom: 1px solid #ccc;padding: 10px;border-radius: 10px;'  id='Alert'>
        <p>数据显示</p>
    </div>
    <!--<input type="button" class='btn btn-primary' id='cancelAlert' value="确定"  style='float:right;margin: 10px 40px 10px 10px ;'>-->
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
</body>
<form class="form-horizontal m-t col-sm-12">
    <div class="form-group  col-sm-2" >
        <input type="button" class='btn btn-primary' style='margin-left:40px;' value="点击获取牌幅" data-toggle='modal' data-target='#userInfoModal'>
    </div>

    <div class="form-group  col-sm-2" >
        <input type="button" class='btn btn-primary' style='margin-left:40px;' value="点击获取解密数据" data-toggle='modal' data-target='#decryptInfoModal'>
    </div>

    <div class="form-group  col-sm-2" >
        <input type="button" class='btn btn-primary' style='margin-left:40px;' value="使用说明" data-toggle='modal' data-target='#infoModal'>
    </div>
</form>
<div class="ibox-content col-sm-12" style="margin-bottom:0px;padding-bottom: 0;">
    <table class="table table-bordered col-sm-12" style="text-align:center;" >
        <thead>
        <tr >
            <th style='text-align: center;' class='col-sm-1'>编号</th>
            <th style='text-align: center;'class='col-sm-1'>牌幅数量</th>
            <th style='text-align: center;'class='col-sm-7'>公钥</th>
            <th style='text-align: center;'class='col-sm-1'>加密牌幅数据集</th>
            <th style='text-align: center;'class='col-sm-1'>创建时间</th>
            <!--<th style='text-align: center;'class='col-sm-1'>状态</th>-->
        </tr>
        </thead>
        <tbody id='releasetableHtml'>
        </tbody>
    </table>
    <div style='text-align: center;'>
        <div id="pagination" class="pagination"></div>
    </div>
</div>
<div class="modal inmodal fade" id="userInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id='handleMess'>添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal m-t">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class=" col-sm-5  control-label" id='handleMany'>牌幅数量</label>
                                <div class="col-sm-7 ">
                                    <input type="text" class='form-control' id='num' placeholder="输入牌幅数量">
                                </div>

                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal" id="close">关闭</button>
                <button type="button" class="btn btn-primary" id='save'>保存</button>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal fade" id="decryptInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id='handleMess1'>获取解密数据</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal m-t">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class=" col-sm-5  control-label" id='handleMany1'>公钥</label>
                                <div class="col-sm-7 ">
                                    <input type="text" class='form-control' id='num1' placeholder="输入公钥">
                                </div>

                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary" id='save1'>获取</button>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal fade" id="infoModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id='handleMess2'>使用说明</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal m-t">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <!--<label class=" col-sm-5  control-label" id='handleMany2'>公钥</label>-->
                                <!--<div class="col-sm-7 ">
                                    <input type="text" class='form-control' id='num2' placeholder="输入公钥">
                                </div>-->
                                <p>
                                    扑克牌代码举例为 A011  总共有4位组成，
                                    第一位 A 代表第几副扑克牌，A代表第一幅扑克牌，
                                    01 代表扑克牌的数值，从01到13分别代表扑克牌的A-K，
                                    最后一位1 代表扑克牌花色，从1到4 分别代表，黑桃、红桃、梅花、方片。
                                    (解密说明：点击进入解密链接地址，第一步：输入公钥(按解密网址规则-公钥长度对应)，第二步：加密数据集中，根据"?43#@"作为分段，复制加密数据集至解密网址-需解密文本数据框内，点击完成解密)
                                </p>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal" >关闭</button>
            </div>
        </div>
    </div>
</div>

</html>
<script src='js/paginat.js'></script>
<script src="js/toastr.min.js"></script>
<script>
    var toastCount = 0;
    var $toastlast;
    var getMessage = function () {
        var msg = 'Hi, welcome to Inspinia. This is example of Toastr notification box.';
        return msg;
    };
    toastr.options = {
        "closeButton": true,
        "debug": true,
        "progressBar": false,
        "positionClass": "toast-top-center",
        "showDuration": "100000000",
        "hideDuration": "1000",
        "timeOut": "3000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
    var shortCutFunction = 'success'
    var msg = '密码修改成功'
    var title = ' 成功'
    var toastIndex = toastCount++;
    $('#save').click(function () {
        $.ajax({
            "type": "post",
            "url": HostName + '/dealcard/poker/result/add',
            "dataType": "json",
            "contentType": "application/json;charset=UTF-8",
            "data": JSON.stringify({
                "pokerNum": Number($('#num').val()),
            }),
            "success": function (backData) {
                $('#Mask').fadeIn();
                $('#userInfoModal').modal('hide');
                if (backData.statusCode == 200) {
                    window.location.reload();
                    $('#Alert').text(backData.statusMsg);
                } else {
                    $('#Alert').text(backData.statusMsg)
                }
            }
        })
    })


    $('#save1').click(function () {
        $.ajax({
            "type": "post",
            "url": HostName + '/dealcard/poker/result/decrypt',
            "dataType": "json",
            "contentType": "application/json;charset=UTF-8",
            "data": JSON.stringify({
                "pokerPublicKey": $('#num1').val(),
            }),
            "success": function (backData) {
                $('#Mask').fadeIn();
                $('#decryptInfoModal').modal('hide');
                if (backData.statusCode == 200) {
                    $('#Alert').text(backData.statusMsg + "decrypt：" + backData.data.pokerResults);
                } else {
                    $('#Alert').text(backData.statusMsg)
                }

            }
        })
    })
    var pageNo = 1;
    var pageSize = 5;
    var HostName = 'http://47.107.160.65'
    //var HostName = 'http://127.0.0.1:8088'
    getuserData()
    function getuserData() {
        $.ajax({
            "type": "post",
            "url": HostName + '/dealcard/poker/result/query',
            "dataType": "json",
            "contentType": "application/json;charset=UTF-8",
            "data": JSON.stringify({
                "pageNo": pageNo,
                "pageSize": pageSize,
                "sort": [{"field": "id", "sort": "desc"}]
            }),
            "success": function (backData) {
                if (backData.data.total) {
                    new Paginat({
                        target: 'pagination',
                        dataTotal: backData.data.total,
                        pageAmountList: [10, 15, 20, 30, 40, 50],
                        curPage: pageNo,
                        pageSize: '7',
                        pageTotal: Math.ceil(backData.data.total / pageSize),
                        pageAmount: pageSize,
                        getPage: function (index) {
                            pageNo = index
                            curPage = index
                            getuserData()
                        },
                        getPageAmount: function (index, index1) {
                            pageSize = index;
                            if (index1) {
                                pageNo = index1
                                curPage = index1
                                getuserData()
                            }
                        }
                    })
                    var Html = ''
                    backData.data.list.map(function (res) {
                        Html += '<tr>'
                        Html += '<td>' + res.id + '</td>'
                        Html += '<td>' + res.pokerNum + '</td>'
                        Html += '<td style="max-width:600px;word-wrap:break-word;">' + res.pokerPublicKey + '</td>'
                        Html += '<td style="max-width:600px;word-wrap:break-word;">' + res.pokerPrivateResult + '</td>'
                        Html += '<td>' + res.createTime + '</td>'
                        /*Html += '<td>' + res.tbStatus + '</td>'*/
                        Html += '</tr>'
                    })
                    $('#releasetableHtml').html(Html)
                }
            }
        })
    }
</script>